<template>
  <div>

    <Card class="marginB10 ">
      <div class="TJ_big " >
        <div class="TJ_title w150 f_bold f_16 lineH30">
          商标类型
          <span class="cRed">*</span>
        </div>
        
        <div class="" >
          <div class="marginB20">
            <RadioGroup v-model="xTlex" size="large" @on-change="onChange">
              <Radio :label="1" class="marginR20">
                <i class="iconfont marginR5 relative f_14 c999" style="top:1px;">&#xe610;</i>文字
              </Radio>
              <Radio :label="2" class="marginR20">
                <i class="iconfont marginR5 relative f_14 c999" style="top:1px;">&#xe607;</i>图形
              </Radio>
              <Radio :label="3" class="marginR30">
                <i class="iconfont marginR5 relative c999" style="top:1px;">&#xe602;</i>文字及图形
              </Radio>
            </RadioGroup>
            <Button
              type="info"
              class="marginB5 relative"
              style="top:3px;"
              @click="mA=true"
              ghost
              size="small"
              shape="circle"
            >
              <Icon type="md-help-circle" size="16" class="marginR5 relative"  />帮助
            </Button>
            <Modal
              v-model="mA"
              title="如何选择商标类型？"
              :footer-hide="true"
              :mask-closable="false"
              width="800"
            >
              <img :src="MmW" alt />
            </Modal>
          </div>
        </div>
      </div>
    
      <div class="TJ_big" >
        
        <div class="TJ_title w150 f_bold f_16 lineH30">
          商标图样
          <span class="cRed">*</span>
        </div>
      
        <div class="TJ_box  " style="width:600px;">
          <div >
            <div v-show="xTlex==1">
              
              <div class="marginB20">
                <RadioGroup v-model="xPiw" size="large" @on-change="onCZ">
                  <Radio :label="1" class="marginR20">自动生成</Radio>
                  <Radio :label="2" class="marginR20" >手动上传</Radio>
                </RadioGroup>
              </div>

              <div v-show="xPiw==1">
              
                <Input
                  search
                  enter-button="生成"
                  placeholder="请输入商标名称"
                  style="width:350px;"
                  class=" pullLeft marginR20 marginB10"
                  v-model="zName1"
                  ref="zName1"
                  @on-search="toK"
                  @on-change="toK_Change"
                />
                <div class="clearBoth"></div>
                <div class=" f_12 c999 marginB20">默认以 “微软雅黑字样自左向右排列” 递交官方；</div>
                <div class="clearBoth"></div>
                
                

                <div
                  class="marginB20 pointer"
                  style="width:120px;"
                  v-show="$app.getVal_fileUrl(img_path)" 
                  @click="$app.openWindow($app.getVal_fileUrl(img_path))"
                >
                  <div class="JC_img width100 tran3 relative overflowH">
                    <img :src="$app.getVal_fileUrl(img_path)"  class="InputShowImg contain bgWhite" />
                  </div>
                  <div class="f_12 c999 textCenter paddingT10">点击查看大图</div>
                </div>
              </div>

              <div  v-show="xPiw==2">
                <div
                class="JC_img  tran3 pointer textCenter cBlue pullLeft marginR20 marginB20 relative overflowH"
                style="width:120px;"
                >
                  <input type="file" ref="fB" accept="image/*" class="InputFileBox" @change="btnBWT($event)" />
                  <div v-show="!$app.getVal_fileUrl(img_path)">
                    <Icon
                      type="ios-add-circle-outline"
                      class="marginB5"
                      style="padding-top:30px;"
                      size="30"
                    />
                    <div class="f_12">上传图片</div>
                  </div>
                  <img
                    :src="$app.getVal_fileUrl(img_path)"
                    v-show="$app.getVal_fileUrl(img_path)"
                    class="InputShowImg contain bgWhite"
                  />
                </div>
                <div >
                  <Button
                    type="primary"
                    class="marginB10"
                    size="small"
                    @click="$app.openWindow($app.getVal_fileUrl(img_path))"
                    v-show="$app.getVal_fileUrl(img_path)"
                  >
                    <Icon type="md-photos" size="16" class="marginR5 relative"  />查看大图
                  </Button>
                </div>
                <div>
                  <Button type="info" class="marginB5" @click="xTo" ghost size="small">
                    <Icon
                      type="md-information-circle"
                      size="16"
                      class="marginR5 relative"
                      
                    />注意事项
                  </Button>
                </div>
              </div>

            </div>

            <div class="marginB20" v-show="xTlex==2||xTlex==3">
              <!-- <div v-show="xTlex==3">
                <Input
                  placeholder="请输入商标名称"
                  style="width:300px;"
                  class="marginB20  marginR20"
                  v-model="zName2"
                  ref="zName2"
                />
              </div> -->
              <div
                class="JC_img  tran3 pointer textCenter cBlue pullLeft marginR20 marginB20 relative overflowH"
                style="width:120px;"
                >
                  <input type="file" ref="fA" accept="image/*" class="InputFileBox" @change="btnBWT($event)" />
                  <div v-show="!$app.getVal_fileUrl(img_path)">
                    <Icon
                      type="ios-add-circle-outline"
                      class="marginB5"
                      style="padding-top:30px;"
                      size="30"
                    />
                    <div class="f_12">上传图片</div>
                  </div>
                  <img
                    :src="$app.getVal_fileUrl(img_path)"
                    v-show="$app.getVal_fileUrl(img_path)"
                    class="InputShowImg contain bgWhite"
                  />
                </div>
                <div >
                  <Button
                    type="primary"
                    class="marginB10"
                    size="small"
                    @click="$app.openWindow($app.getVal_fileUrl(img_path))"
                    v-show="$app.getVal_fileUrl(img_path)"
                  >
                    <Icon type="md-photos" size="16" class="marginR5 relative"  />查看大图
                  </Button>
                </div>
                <div>
                  <Button type="info" class="marginB5" @click="xTo" ghost size="small">
                    <Icon
                      type="md-information-circle"
                      size="16"
                      class="marginR5 relative"
                      
                    />注意事项
                  </Button>
                </div>
            </div>

          </div>

          <div class="clearBoth"></div>

          <template v-if="xTlex!=1">
            <div class="marginB10 marginT10">
              <Checkbox v-model="is_portrait" size="large" @on-change="xwT">肖像作为商标申请注册</Checkbox>
              <div class="marginR30  pointer textCenter tran3 cBlue" v-show="is_portrait">
                <div class="JC_img relative overflowH pullLeft marginR20" style="height:120px;width:120px;margin:10px 0;" >
                  <input type="file" ref="kA" accept=".pdf" class="InputFileBox" @change="upPdfXx($event)" />
                  <div v-show="!$app.judgeData(portrait_path.file_url)">
                    <Icon
                      type="ios-add-circle-outline"
                      class="marginB5"
                      style="padding-top:30px;"
                      size="30"
                    />
                    <div class="f_12">请上传 pdf</div>
                  </div>
                  
                  <i class="iconfont iconpdf f_40 cBlue relative" style="top:25px;" v-show="$app.judgeData(portrait_path.file_url)"></i>
                </div>
                <div class="pullLeft">
                  <!-- <Button type="primary"  class="marginB10 marginT10 " @click="$app.alert('等待领导给文件','暂缺例子文件')" size="small">
                    查看例子
                  </Button> -->
                  <br/>
                  <Button type="info" ghost class="marginB10  " @click="$app.openWindow(portrait_path.file_url)" v-show="$app.judgeData(portrait_path.file_url)" size="small">
                    查看文件
                  </Button>
                </div>
              </div>
            </div>
          </template>
          
          <div class="clearBoth"></div>
          

        </div>
      </div>

      <div class="TJ_big">
        <div class="TJ_title w150 f_bold f_16 lineH30" >商标说明</div>
        
        
        <div class="TJ_box borderNone">
          <div class="">
            <Input
              type="textarea"
              v-model="remark"
              ref="remark"
              :rows="4"
              placeholder="选填，仅用于填写商标图样说明"
              clearable
              style="width: 600px"
              size="large"
            />
          </div>
        </div>
      </div>

    </Card>
  </div>
</template>


<script>
import MmW from "@$@/img/mmW.jpg";
export default {
  name: "b1",
  components: {},
  data() {

    
    let {
      $route: {
        query: {
          tm_name
        }
      }
    } = this;


    let data = {
      tm_name,//页面带过来的注册商标名
      remark:'',//商标说明

      
      zName1: $app.judgeData(tm_name)?tm_name:"", //商标名称 纯文字
      // zName2: "", //商标名称 图+文
      img_path: {//图片
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      },

      is_portrait:false,//是否以肖像作为商标申请注册,false否,true是
      portrait_path:{//肖像权
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      },
      //商标类型
      xTlex: 1,//第一排
      xPiw: 1//第二排

    };


    let tool = {
      
      //选择商标类型弹框
      mA: false,
      MmW
    };
    return Object.assign(data, tool);
  },
  mounted() {
    let { tm_name } = this;
    if($app.judgeData(tm_name)){//地址栏有，要注册的商标名带进来
      this.toK();
    }
  },
  methods: {
    //单选框改变值
    onChange(i) {
      console.log('文字+图像+文字及图形',i);
      //变回自动生成
      if(i==1){
        this.xPiw=1;
      }else{
        this.xPiw=2;
      }
      
      this.initTaT();
    },

    //文字专用
    onCZ(i) {
      // console.log('自动生成+手动上传',i);
      this.initTaT();
    },

    //选项卡换来换去的时候初始化数据
    initTaT(){
      this.zName1=""; //商标名称 纯文字
      this.img_path={//图片
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      };

      this.is_portrait=false;//是否以肖像作为商标申请注册,false否,true是
      this.portrait_path={//肖像权
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      };
      
    },
    //上传商标图片
    btnBWT(e){
      let file = e.target.files[0];//选中的文件
      //格式判断
      $app.suffix.jpgPng(e,file,false,()=>{
        
        $app.selectFileImage(1500,null,file,8,resData=>{
          this.img_path=resData;
          this.$refs['fA'].value='';
          this.$refs['fB'].value='';
        },()=>{
          this.$refs['fA'].value='';
          this.$refs['fB'].value='';
        });


      });

      
    },
    // 肖像权 pdf
    upPdfXx(e){
      let file = e.target.files[0];//选中的文件
      //格式判断
      $app.suffix.pdf(e,file,false,()=>{
        $ajax.upOther(file,24,resData=>{
          this.portrait_path=resData;
          this.$refs['kA'].value='';
        },()=>{
          this.$refs['kA'].value='';
        });
      });
    },
    xwT(buEr){
    //  console.log(buEr)

      this.portrait_path={//肖像权
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      };//清空数据

    },

    //文字 to 图片
    toK(callBack){
      let {zName1}=this;
      let value=$app.delSpace(zName1);
      if(!$app.judgeData(value) ){
        this.$Message.error({content:'商标名称不能为空'});
      }else{
        $ajax.upMakeTmImage(value,resData=>{
          this.img_path=resData;
          
          callBack instanceof Function && callBack();
        });
      }
    },
    xTo(){
      this.$Modal.info({
        title: '注意事项',
        content:'<div class="marginB10">1. 图样文件格式应为jpg，图形应清晰，图样文件大小应小于“200KB”，且图形像素介于“400x400 - 1500x1500”之间；</div>\
        <div class="marginB10">2. 如果通过扫描获得图样的，应按24位彩色，300dpi分辨率扫描符合《商标法》及其实施条例规定的图形（图形清晰，大于5X5厘米且小于10X10厘米）；</div>\
        <div class="marginB10">3. 申请人（或代理人）应确保扫描后的图形与原图形的色彩深浅（或灰度）一致，否则，可能影响《商标注册证》上图形的清晰度；</div>\
        <div>4. 上传图样为黑白，取得注册后，可以更换商标颜色使用；</div>'
      });
    },
    toK_Change(){
      this.img_path={//图片
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      };
    }
  }
};
</script>

